<template>
	<el-container>
		<el-aside width="150px" v-loading="showGrouploading">
			<el-container>
				<el-main class="nopadding">
					<div class="status-items">
						<a href="javascript:;" :key="l.value" v-for="(l, index) in group" @click="statusChange(index)"	:class="l.checked ? 'on' : ''">
							{{ l.label }}</a>
					</div>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
				<el-header>
					<div class="left-panel">
						<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
						<el-button type="primary" @click="add">新增</el-button>
						<el-button type="success" @click="goodsListStatus('up')" :disabled="selection.length < 1"
								   v-show="tableParams.list_type === 3">上架</el-button>
						<el-button type="warning" @click="goodsListStatus('down')" :disabled="selection.length < 1"
								   v-show="tableParams.list_type === 1 || tableParams.list_type === 2">下架</el-button>
					</div>
					<div class="right-panel">
						<div class="right-panel-search">
							<el-form inline v-model="search" label-position="right">
								<el-form-item label="分类">
									<el-cascader
										v-model="search.category_id"
										:options="shopCategorys"
										:props="{
										value: 'id',
										label: 'cat_name',
										children: 'children',
										emitPath: false,
										checkStrictly: true
									}"
										clearable
									/>
								</el-form-item>
								<el-form-item label="关键词">
									<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-header>
				<el-main class="nopadding">
					<scTableGdshop ref="table" tableName="goodsTable" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter
								   :params="tableParams" :column="tableColumn">

						<template #goods_info="scope">
							<goods-info-item :row="scope.row" :baseUrl="baseUrl" />
						</template>
						<template #price="scope">
							<div class="goods-price-box hover-btn">
								<div class="goods-price">
									<div>{{ get10KMoneyByMinute(scope.row.min_price) }}</div>
									<div v-show="scope.row.min_price != scope.row.max_price">
										{{ get10KMoneyByMinute(scope.row.max_price) }}
									</div>
								</div>
								<div class="btn-edit active">
									<el-icon @click="popEditShow(scope.row, 'price')"><el-icon-edit-pen /></el-icon>
								</div>
							</div>
						</template>
						<template #stock="scope">
							<div class="goods-stock-box hover-btn">
								<div class="goods-stock">
									<div>{{ scope.row.stock }}</div>
								</div>
								<div class="btn-edit active">
									<el-icon @click="popEditShow(scope.row, 'stock')"><el-icon-edit-pen /></el-icon>
								</div>
							</div>
						</template>
						<template #time="scope">
							<div>{{ showDateTime(scope.row.update_at) }}</div>
						</template>

						<el-table-column type="selection" width="40" align="center" fixed></el-table-column>
						<el-table-column label="操作" fixed="right" align="center" width="100">
							<template #default="scope">
								<el-button type="text" size="small" @click="editGoods(scope.row.id)">编辑</el-button>
								<el-button type="text" size="small" @click="delGoods(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</scTableGdshop>
				</el-main>
		</el-container>
	</el-container>

	<edit-dialog ref="editDialog" :baseUrl="baseUrl"></edit-dialog>
	<pop-set-form ref="popSetForm" @success="popSetFormSuccess"></pop-set-form>

</template>

<script>
import editDialog from './edit'
import popSetForm from './popSetForm'

export default {
		name: 'shop-goods',
		components: {
			popSetForm,
			editDialog
		},
		data() {
			return {
				dialog: {
					save: false
				},
				showGrouploading: false,
				groupFilterText: '',
				group: [],
				groupProps: {
					label: 'label',
					value: 'id'
				},
				apiObj: this.$API.shop.goods,
				selection: [],
				search: {
					keyWord: '',
					category_id: 0,
				},
				baseUrl: '',
				tableParams: {
					list_type: 1,
				},
				tableColumn: [
					{
						prop: "goods_info",
						label: "商品",
						align: "left"
					},
					{
						prop: "price",
						label: "价格",
						width: 90
					},
					{
						prop: "stock",
						label: "库存",
						width: 90
					},
					{
						prop: "sales",
						label: "销量",
						width: 80
					},
					{
						prop: "display_sort",
						label: "排序",
						width: 80
					},
					{
						prop: "time",
						label: "时间",
						width: 93
					},
				],
				tmpGoods: {},
				shopCategorys: [],
			}
		},
		mounted() {
			this.getBaseUrl()
			this.getGroup()
			this.getShopCategorys()
		},
		methods: {
			showDateTime(_time) {
				if (!_time) {
					return "-";
				}
				return this.$TOOL.dateFormat(_time * 1000);
			},
			async getShopCategorys() {
				let res = await this.$API.shop.category.list();
				if (res.code === 0) {
					this.shopCategorys = this.$TOOL.deepTree(res.data, 'parent_id');
				}
			},
			async getBaseUrl() {
				this.baseUrl = await this.$TOOL.getBaseUrl(this.$API)
				console.log(this.baseUrl)
			},
			showImage(url) {
				return this.baseUrl + url;
			},
			tableRefresh(isClaer = false) {
				if (isClaer === true) {
					this.search.keyWord = '';
					this.search.category_id = 0;
					this.$refs.table.refresh();
				}
				else {
					this.$refs.table.refresh();
				}
			},
			//添加
			add(){
				this.editGoods(0)
			},
			//编辑
			editGoods(goodsId){
				this.$refs.editDialog.show(goodsId)
			},
			//删除
			async delGoods(row, index){
				console.log(index)
				this.$confirm(`确定删除选中的 ${row.goods_name}  吗？`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					var res = await this.apiObj.delete({ ids: [row.id] });
					loading.close();
					if (res.code === 0) {
						this.$message.success("操作成功")
						this.tableRefresh()
					}
					else{
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}).catch(() => {

				})
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//加载树数据
			async getGroup(){
				/*this.showGrouploading = true;
				var res = await this.$API.cms.category.list({type:this.categoryType})
				this.showGrouploading = false;
				var allNode ={id: 0, cat_name: '所有'}
				res.data.unshift(allNode);
				this.group = this.$TOOL.deepTree(res.data, 'parent_id');*/

				this.group = [
					{
						label: "在售",
						value: 1,
						checked: true
					},
					{
						label: "售罄",
						value: 2,
						checked: false
					},
					{
						label: "仓库",
						value: 3,
						checked: false
					}
				];
			},
			//搜索
			upsearch(){
				this.$refs.table.upData(this.search)
			},
			//本地更新数据
			handleSuccess(data, mode){
				if(mode==='add'){
					this.$refs.table.reload();
				}else if(mode==='edit'){
					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
						Object.assign(item, data)
					})
				}
			},
			statusChange(index) {
				this.group.map((e,i) => {
					e.checked = index === i
					if (e.checked) {
						this.tableParams.list_type = e.value
					}
				})
				this.$refs.table.refresh();
			},
			get10KMoneyByMinute(v) {
				return this.$TOOL.get10KMoneyByMinute(v);
			},
			popEditShow(goodsRow, typeStr) {
				this.tmpGoods = goodsRow;
				this.$refs.popSetForm.showForm(goodsRow.id, typeStr);
			},
			popSetFormSuccess(data) {
				if (data.stock) {
					this.tmpGoods.stock = data.stock;
				}
				if (data.min_price) {
					this.tmpGoods.min_price = data.min_price;
				}
				if (data.max_price) {
					this.tmpGoods.max_price = data.max_price;
				}
			},
			// 商品上下架
			goodsListStatus(type) {
				let text = type === "up" ? "上架" : "下架";
				const that = this
				this.$confirm(text + " 所选商品商品吗？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
					.then(() => {
						// 确认
						that.$API.shop.goods
							.set_status({
								type: type,
								ids: this.selection.map(e => e.id)
							})
							.then(() => {
								that.tableRefresh()
							});
					})
					.catch(() => {
						// 取消
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
.status-items{margin-top: 10px;}
.status-items a{
	display: block;
	line-height: 36px;
	text-align: center;
	color: #000;
	background-color: #fff;
	margin-bottom: 1px;
	font-size: 12px;
	&:hover {
		 background-color: #85a1f8;
		 color: #fff;
	}
	&.on {
		 background-color: #ecf5ff;
		 color: #409eff;
	}
}
.goods-stock-box {
	text-align: center;
	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}
.goods-price {
	color: #f56c6c;
}
.btn-edit {
	i {
		cursor: pointer;
		&:hover {
			color: #00a0e9;
		}
	}
}
.goods-price-box {
	text-align: center;
	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}
.active {
	display: none;
}
.hover-btn:hover {
	.active {
		display: inline;
	}
}
.right-panel-search{
	.el-form-item--default{margin-bottom: 0;}
}
</style>
